<template>
		<!--卡详情界面-->
		<el-dialog title="卡详情信息" v-model="cardDetailVisible" :close-on-click-modal="false">
			<el-form label-width="100px" :model="cardDetail" ref="cardDetail">
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">卡号：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">{{cardDetail.msisdn}}</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">ICCID:</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">898602B2221430000006</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">IMSI:</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">460040260908676</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">用户状态：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">单向停机(2002)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">套餐名称：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">GPRS10元套餐(2020)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">查询代码：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">456</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">工作状态：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">GPRS在线(2001)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">开机状态：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">开机(2008)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">API代码：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">456</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">是否签约短信服务：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">是</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">是否签约GPS:</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">否</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">用户余额：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">11.32(2011)</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">套餐总流量：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">100M(2020)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">已用流量：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">80M(2020)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">剩余流量：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">20M(2020)</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">当月短信使用条数：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">2000(2012)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">服务商名称：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">郑州二七区服务商</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">激活时间：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">2016-12-05 15:41:38</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">APN：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">cmmtm(2001)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">IP：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">10.56.129.64(2001)</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">接入类型：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">4G(2001)</div></el-col>
			</el-row>
			<el-row :gutter="1">
			  <el-col :span="4"><div class="grid-content bg-purple">入库日期：</div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple bg-purple-light">2016-10-15</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">出库日期：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">2016-10-16</div></el-col>
			  <el-col :span="3"><div class="grid-content bg-purple">最后更新时间：</div></el-col>
			  <el-col :span="5"><div class="grid-content bg-purple bg-purple-light">2016-10-19 15:24:36</div></el-col>
			</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="cardDetailVisible = false">取消</el-button>
				<el-button type="primary" @click.native="updateCard" :loading="addLoading">手动更新</el-button>
			</div>
		</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				cardDetailVisible:false,
				addLoading:false,
				cardDetail: {
					msisdn: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		methods: {
			updateCard() {
				console.log('准备访问接口更新卡的数据信息!');
			},
			showCardDetail(val) {
				//TODO:AJAX异步去数据库查询卡号详细信息
				this.cardDetail.msisdn=val;
				this.cardDetailVisible=true;
			}			
		}
	}

</script>
<style scoped>
 .el-row {
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 0px;
		border:1px solid #d3dce6;
  }
  .bg-purple-dark {
    background: red;
  }
  .bg-purple {
    background: #FFF;
  }
  .bg-purple-light {
    color: #009966;
  }
  .grid-content {
    border-radius: 0px;
		border:0px;
    min-height: 36px;
		line-height:36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: red;
  }
</style>